//
//  CatHome.swift
//  next
//
//  Created by mac on 2023/5/12.
//

import SwiftUI
import SwiftUICharts


struct HomeView: View {
    var body: some View {
        NavigationView{
            ScrollView{
                VStack{
                    //--------------------------------------------
                    //宠物屋部分
                    ZStack(alignment: .top){
                        VStack{
                            HStack{
                                Image("icon")
                                    .resizable()
                                    .frame(width: 50, height: 50)
                                
                                VStack(alignment:.leading){
                                    Text("SKINCARE")
                                        .font(.custom("祛痘精灵", size: 20))
                                    Text("趣痘精灵")
                                        .font(.custom("祛痘精灵", size: 15))
                                }
                                Spacer()
                            }
                            .padding(.horizontal, 10)
                            
                            VStack(spacing: 2){
                                //画虚线
                                Path { path in
                                    path.move(to: CGPoint(x: 0, y: 0))
                                    path.addLine(to: CGPoint(x: UIScreen.main.bounds.size.width, y: 0))
                                }
                                .stroke(style: StrokeStyle(lineWidth: 2, dash: [10, 7]))
                                .foregroundColor(Color("deepGreen"))
                                .offset(y: 4)
                                
                                Text("快来看看吧")
                                    .font(.system(size: 20))
                                    .foregroundColor(Color("deepGreen"))
                                    .fontWeight(.bold)
                                Text("你的宠物等你很久啦")
                                    .font(.system(size: 15))
                                    .foregroundColor(Color("deepGreen"))
                                    .fontWeight(.bold)
                            }
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, 3)
                            .background()
                            
                            Image("catHome")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 350, height: 300)
                            
                            
                            HStack(spacing: 20){
                                threeButton(iconName: "list.bullet", textName: "护肤记录", jumpView: EmptyView())
                                threeButton(iconName: "clock", textName: "祛痘记录", jumpView: EmptyView())
                                threeButton(iconName: "questionmark.square", textName: "AI问答", jumpView: ChatView())
                                //链接到AI问答界面
                            }
                        }
                        .background{
                            RoundedRectangle(cornerRadius: 50)
                                .fill(Color("systemColor"))
                                .ignoresSafeArea(.all)
                                .frame(height: 800)
                                .offset(y:-140)
                        }
                    }
                    .padding(.bottom, 50)
                    
                    
                    //--------------------------------------------
                    //肤质变化部分
                    VStack{
                        HStack{
                            Rectangle()
                                .fill(Color("deepGreen"))
                                .frame(width: 5, height: 30)
                            Text("肤质变化")
                                .font(.system(size: 20))
                            Spacer()
                        }
                        .padding(.leading, 15)
                        .padding(.top, 10)
                        
                        VStack{
                            HStack{
                                var Data_1: [Double] = [12, 9, 2, 8, 2, 4, 6]
                                fourCharts(Data: Data_1, titleName: "皮肤综合得分", imgName: "BarChart")
                                
                                var Data_2: [Double] = [12, 9, 5, 8, 2, 7, 6]
                                fourCharts(Data: Data_2, titleName: "痘痘数量", imgName: "LineChart")
                            }
                            HStack{
                                var Data_3: [Double] = [8, 2, 4, 6, 12, 9, 2]
                                fourCharts(Data: Data_3, titleName: "黑头数量", imgName: "LineChart")
                                
                                var Data_4: [Double] = [8, 2, 4, 6, 12, 9, 2]
                                fourCharts(Data: Data_4, titleName: "干油指数", imgName: "BarChart")
                            }
                        }
                        .padding(.bottom, 15)
                    }
                    .background(
                        Rectangle()
                            .fill(Color.white)
                            .shadow(color: Color("systemColor"), radius: 10)
                    )
                    .padding(.bottom, 15)
                    
                    //--------------------------------------------
                    //我的成就部分
                    VStack{
                        HStack{
                            Rectangle()
                                .fill(Color("deepGreen"))
                                .frame(width: 5, height: 30)
                                .ignoresSafeArea(.all)
                            Text("我的成就")
                                .font(.system(size: 20))
                            Spacer()
                        }
                        .ignoresSafeArea(.all)
                        .padding(.leading, 15)
                        .padding(.top, 10)
                        
                        //待填充
                        Rectangle()
                            .fill(Color.white)
                            .frame(height:300)
                            
                
                    }
                    .ignoresSafeArea(.all)
                    .background(
                        Rectangle()
                            .fill(Color.white)
                            .frame(maxHeight: .infinity)
                            
                            .shadow(color: Color("systemColor"), radius: 5)
                            
                    )
                    
                }
                .ignoresSafeArea(.all)
            }
        }
    }

    //三个跳转按钮的函数
    func threeButton<destination: View>(iconName: String, textName: String, jumpView: destination) -> some View {
        return Button(action: {}){
            NavigationLink(destination: jumpView, label: {
                HStack(spacing: 2){
                    Image(systemName: iconName)
                    Text(textName)
                        .font(.system(size: 13))
                        .fontWeight(.bold)
                }
                .frame(width: 90, height:30)
                .foregroundColor(Color("deepGreen"))
                .background(
                    Capsule()
                        .fill(Color.white)
                )
            })
        }
    }
    
    //四个图表
    func fourCharts(Data: [Double], titleName: String, imgName: String) -> some View{
        
        return VStack{
            Capsule()
                .fill(Color("systemColor"))
                .frame(width: 130, height: 30)
                .overlay{
                    Text(titleName)
                        .font(.system(size: 15))
                }
            if imgName == "LineChart"{
                LineChart()
                        .data(Data)
                        .chartStyle(ChartStyle(backgroundColor: .white,
                                               foregroundColor: ColorGradient(.green, .green)
                                              ))
                        
                        .frame(width: 130, height: 100)
                        .padding(.horizontal, 20)
            } else if imgName == "BarChart" {
                BarChart()
                        .data(Data)
                        .chartStyle(ChartStyle(backgroundColor: .white,
                                               foregroundColor: ColorGradient(.green, .green)
                                              ))
                        
                        .frame(width: 130, height: 100)
                        .padding(.horizontal, 20)
            }
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}
